<div class="my-3 my-md-5">
  <div class="container">
    <div class="row">
      <div class="col-lg-4">
        <div class="card card-profile">
          <div class="card-header card-header-profile"></div>
          <div class="card-body text-center">
            <img class="card-profile-img" src="<%= @shop.avatar.url %>">
            <h3 class="mb-3"><%= @shop.name %></h3>
            <p class="mb-4">
              Big belly rude boy, million dollar hustler. Unemployed.
            </p>
            <button class="btn btn-outline-primary btn-sm">
              <span class="fa fa-twitter"></span> <%= i18n_enum @shop, :state %>
            </button>
          </div>
        </div>
        <% @shop.shopers.each do |shoper| %>
        <div class="card">
          <div class="card-body">
            <div class="media">
              <span class="avatar avatar-xxl mr-5" style="background-image: url(<%= shoper.avatar.url %>)"></span>
              <div class="media-body">
                <h4 class="m-0"><%= shoper.name %></h4>
                <p class="text-muted mb-0"><%= shoper.phone %></p>
                <ul class="social-links list-inline mb-0 mt-2">
                  <li class="list-inline-item">
                    <a href="javascript:void(0)" title="" data-toggle="tooltip" data-original-title="Facebook"><i class="fa fa-facebook"></i></a>
                  </li>
                  <li class="list-inline-item">
                    <a href="javascript:void(0)" title="" data-toggle="tooltip" data-original-title="Twitter"><i class="fa fa-twitter"></i></a>
                  </li>
                  <li class="list-inline-item">
                    <a href="javascript:void(0)" title="" data-toggle="tooltip" data-original-title="1234567890"><i class="fa fa-phone"></i></a>
                  </li>
                  <li class="list-inline-item">
                    <a href="javascript:void(0)" title="" data-toggle="tooltip" data-original-title="@skypename"><i class="fa fa-skype"></i></a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <% end %>
        <div class="card">
          <div class="card-header">
            <h3 class="card-title">统计数据</h3>
          </div>
          <div class="card-body">
          </div>
        </div>
      </div>
      <div class="col-lg-8">
        <div class="card">
          <div class="card-header">
            <div class="input-group">
              <input type="text" class="form-control" placeholder="Message">
              <div class="input-group-append">
                <button type="button" class="btn btn-secondary">
                  <i class="fe fe-camera"></i>
                </button>
              </div>
            </div>
          </div>
          <div class="card-body">
            <div class="row">
              <div class="col-sm-4 col-lg-4">
                <div class="card p-3">
                  <div class="d-flex align-items-center">
                    <span class="stamp stamp-md bg-blue mr-3">
                      <i class="fe fe-dollar-sign"></i>
                    </span>
                    <div>
                      <h4 class="m-0"><a href="javascript:void(0)">132 <small>单成功销售</small></a></h4>
                      <small class="text-muted">12 单等待支付</small>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-sm-4 col-lg-4">
                <div class="card p-3">
                  <div class="d-flex align-items-center">
                    <span class="stamp stamp-md bg-green mr-3">
                      <i class="fe fe-shopping-cart"></i>
                    </span>
                    <div>
                      <h4 class="m-0"><a href="javascript:void(0)">78 <small>条订单</small></a></h4>
                      <small class="text-muted">32 shipped</small>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-sm-4 col-lg-4">
                <div class="card p-3">
                  <div class="d-flex align-items-center">
                    <span class="stamp stamp-md bg-yellow mr-3">
                      <i class="fe fe-message-square"></i>
                    </span>
                    <div>
                      <h4 class="m-0"><a href="javascript:void(0)">132 <small>评论</small></a></h4>
                      <small class="text-muted">16 待评论</small>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <%= render "form" %>
        <div class="card">
          <div class="card-header">
            <h3 class="card-title">证件资料</h3>
          </div>
          <div class="card-body">
            <div class="row row-cards">
              <div class="col-sm-6 col-lg-4">
                <div class="card p-3">
                  <a href="javascript:void(0)" class="mb-3">
                    <img src="<%= @shop.idcard_front %>" alt="Photo by Nathan Guerrero" class="rounded">
                  </a>
                </div>
              </div>
              <div class="col-sm-6 col-lg-4">
                <div class="card p-3">
                  <a href="javascript:void(0)" class="mb-3">
                    <img src="<%= @shop.idcard_back %>" alt="Photo by Alice Mason" class="rounded">
                  </a>
                </div>
              </div>
              <div class="col-sm-6 col-lg-4">
                <div class="card p-3">
                  <a href="javascript:void(0)" class="mb-3">
                    <img src="<%= @shop.license %>" alt="Photo by Rose Bradley" class="rounded">
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>